<!--波动率微笑曲线-->
<template>
  <div style="text-align: center">
    期限
    <el-select @change="limitSelectChg"
               v-model="limitSelect" label="期限"
               placeholder="选择期限"
               style="width: 240px"
    >
      <el-option
          v-for="item in pointList"
          :key="item.key"
          :label="item.val"
          :value="item.key"
      />
    </el-select>
    <div ref="limitVolChartRef" :class="className" :style="{height:height,width:width}"/>
  </div>
</template>

<script>
import * as echarts from 'echarts'

const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '800px'
    },
    height: {
      type: String,
      default: '500px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      chartData: {},
      chart: null,
      limitSelect: null,
      pointList: [],
      uuId: Math.random(),
      proxy: {},
      title: '波动率微笑曲线',
      listData: [],
      xName: null,
      yName: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.limitVolChartRef, 'macarons');
      // this.chart = echarts.init(document.getElementById(this.myId), 'macarons')
      this.setOptions(this.chartData)
    },
    clearChart() {
      this.pointList = [];
      this.chartData = [];
      this.limitSelect = '1M'
      this.setOptions({'titleText': '波动率微笑曲线', 'xAxisData': [], 'seriesName': null});
    },
    setPointData(listData, flag) {
      this.pointList = [];
      if (listData.pointList.length > 0) {
        for (let i = 0; i < listData.pointList.length; i++) {
          this.pointList.push({'key': listData.pointList[i], 'val': listData.pointList[i]})
        }
        //是否覆盖为第一个值
        if (flag === true) {
          this.limitSelect = this.pointList[0].key;
        }
      }
    },
    /**
     * 下拉选择后重新生成曲线
     *
     */
    limitSelectChg(newVal) {
      this.limitSelect = newVal;
      this.setCharData(this.proxy, this.title, this.listData, this.xName, this.yName, false)
    },
    /**
     * 曲线调用数据处理方法
     * @param proxy  vue上下文实例
     * @param title  曲线名称
     * @param listData 曲线数据
     * @param xName   横坐标字段名
     * @param yName   纵坐标字段名
     * @param flag    下拉项是否覆盖默认值
     */
    setCharData(proxy, title, listData, xName, yName, flag) {
      this.proxy = proxy;
      this.title = title;
      this.listData = listData;
      this.xName = xName;
      this.yName = yName;
      if (listData == null || listData.length < 1) {
        this.initChart([]);
        return;
      }
      const resultList = listData.resultList;
      let lineChartData = this.chart.getOption();
      if (lineChartData == undefined) {
        lineChartData = {};
      }
      this.setPointData(listData, flag);
      let xAxisData = [];
      let seriesObj = {};
      let seriesData = [];
      let seriesArr = [];
      lineChartData.xAxis = [];
      lineChartData.series = [];
      for (let i = 0; i < resultList.length; i++) {
        if (this.limitSelect === resultList[i].vls_term_st || this.limitSelect === resultList[i].vls_term) {
          //绘制时横坐标精度为2
          xAxisData.push(proxy.lsh.round(resultList[i][xName] * 100, 2));
          seriesArr.push(proxy.lsh.round(resultList[i][yName] * 100, 2));
        } else {
          let termStr = this.limitSelect;
          let termSufix = termStr.substring(termStr.length - 1);
          let termLimit = termStr.substring(0, termStr.length - 1);
          if (termSufix == 'M') {
            termStr = termLimit * 30 + 'D';
          } else if (termSufix == 'Y') {
            termStr = termLimit * 365 + 'D';
          } else if (termSufix == 'W') {
            termStr = termLimit * 7 + 'D';
          }
          if (termStr === resultList[i].vls_term_st || termStr === resultList[i].vls_term) {
            //绘制时横坐标精度为
            xAxisData.push(resultList[i][xName] * 100);
            seriesArr.push(proxy.lsh.round(resultList[i][yName] * 100, 4));
          }
        }
        seriesData = seriesArr;
      }
      if (resultList.length > 0) {
        lineChartData.titleText = title;
        lineChartData.seriesName = [title];
        seriesObj[title] = seriesData;
      } else {
        lineChartData.titleText = title;
      }
      //去重
      xAxisData = proxy.lsh.uniq(xAxisData);
      lineChartData.xAxisData = xAxisData;
      lineChartData.seriesData = seriesObj;
      lineChartData.yAxis = []
      lineChartData.xAxis = []
      this.chartData = lineChartData;
      this.chart.dispose();
      this.initChart();
    },
    setOptions(expectedData) {
      unwarp(this.chart).setOption({
        title: {
          text: expectedData.titleText
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '10%',
          top: '100px',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          }
        },
        xAxis: {
          axisLine: {
            symbol: ['none', 'arrow']
          },
          name: '行权价(%)',
          min: 'dataMin',
          max: 'dataMax',
          nameLocation: 'middle',
          nameGap: 30,
          type: 'category',
          boundaryGap: false,
          data: expectedData.xAxisData
        },
        yAxis: {
          show: true,
          min: 'dataMin',
          max: 'dataMax',
          axisLine: {
            symbol: ['none', 'arrow']
          },
          name: '波动率(%)',
          type: 'value'
        },
        series: this.setSeries(expectedData)
      }, true);
    },
    setSeries(chartData) {
      let series = [];
      if (chartData.seriesName != null && chartData.seriesName.length > 0) {
        for (let i = 0; i < chartData.seriesName.length; i++) {
          let item = {};
          item.name = chartData.seriesName[i];
          item.type = 'line';
          item.data = chartData.seriesData[item.name];
          item.smooth = true;
          item.stack = 'Total',
              series.push(item);
        }
        return series;
      } else {
        return [];
      }
    },
  }
}
</script>
